<template>
    <div class="container">
        <!-- header -->
        <div class="header">
            <el-radio-group
                v-model="pageType"
                size="small"
                @change="getPageType"
            >
                <el-radio-button label="user" >用户举报</el-radio-button>
                <el-radio-button label="comment">评论举报</el-radio-button>
            </el-radio-group>
            <!-- <p class="header-title">举报理由</p>
            <el-select
                v-model="report"
                filterable
                placeholder="请选择"
                size="small"
                @change="getTableData(1)"
            >
                <el-option
                    v-for="item in optionReport"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select> -->
            <!-- <div class="header-right">
                <p class="header-title">举报类型</p>
                <el-select
                    v-model="reportType"
                    filterable
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in optionReportType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div> -->
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
        >
            <el-table-column
                label="ID"
                width="100px"
                type="index"
                align="center"
            />
            <el-table-column
                prop="true_name"
                label="用户姓名"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="student_no"
                label="用户ID"
                show-overflow-tooltip
                width="160px"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="phone"
                label="用户手机号"
                show-overflow-tooltip
                width="130px"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="school_name"
                label="用户学校"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <!-- <el-table-column
                prop="data_type"
                label="举报类型"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.data_type == 'post' ">动态</span>
                    <span v-if="scope.row.data_type == 'post_comment' ">评论</span>
                    <span v-if="scope.row.data_type == 'user' ">IM用户</span>
                </template>
            </el-table-column> -->
            <el-table-column
                prop="post_content"
                label="举报用户"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <!-- <div
                        v-if="scope.row.data_type == 'post'"
                        @click="fnJump(scope.row)"
                    >
                        <span class="cursor">
                            {{ scope.row.post['post_content'] !== '' ? scope.row.post['post_content'] : '--' }}
                        </span>
                    </div>
                    <div
                        v-if="scope.row.data_type == 'post_comment' "
                        class="cursor"
                        @click="fnJump(scope.row)"
                    >
                        <span>
                            {{ scope.row.post['post_content'] == undefined || scope.row.post['post_content'] == '' ? ' ' :scope.row.post['post_content'] }}
                            {{ scope.row.post_comment['comment_content'] == undefined || scope.row.post_comment['comment_content'] == '' ? ' ' : scope.row.post_comment['comment_content'] }}
                        </span>
                    </div>
                    <div v-if="scope.row.data_type == 'user'">
                        <span v-if="scope.row.user.true_name !== '' ">{{ scope.row.user.true_name }} / </span>
                        <span
                            class="cursor"
                            @click="goUser(scope.row)"
                        >{{ scope.row.phone }}</span>
                    </div> -->
                    {{ scope.row.true_name }}
                </template>
            </el-table-column>
            <!-- <el-table-column
                prop="report_image_list"
                label="举报内容-图片"
                show-overflow-tooltip
                width="150px"
            >
                <template
                    slot-scope="scope"
                >
                    <div v-if="scope.row.data_type == 'post'">
                        <template v-if="scope.row.post['post_image_list'].length > 0">
                            <a
                                href="javascript:;"
                                style="color: #409EFF"
                                @click="fnShowPreview(scope.row.post['post_image_list'])"
                            >查看全部图片({{ scope.row.post['post_image_list'].length }})</a>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </div>
                    <div v-if="scope.row.data_type == 'post_comment' && scope.row.post['post_image_list'] !== undefined">
                        <a
                            href="javascript:;"
                            style="color: #409EFF"
                            @click="fnShowPreview(scope.row.post['post_image_list'])"
                            v-if="scope.row.post['post_image_list'].length > 0"
                        >查看全部图片({{ scope.row.post['post_image_list'].length }})</a>
                    </div>
                    <div v-if="scope.row.data_type == 'post_comment' && scope.row.post['post_image_list'] == undefined ">
                        --
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column
                prop="report_type"
                label="举报理由"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <!-- <span v-if="scope.row.report_type !== 'i' "> {{ scope.row.report_type | setType }}</span>
                    <span v-if="scope.row.report_type == 'i' ">{{ scope.row.report_reason }}</span> -->
                    {{ scope.row.report_reason }}
                </template>
            </el-table-column>
            <el-table-column
                prop="report_image_list"
                label="举报理由-图片"
                show-overflow-tooltip
                width="150px"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.report_image_list.length > 0">
                        <a
                            href="javascript:;"
                            style="color: #409EFF"
                            @click="fnShowPreview(scope.row.report_image_list)">查看全部图片({{ scope.row.report_image_list.length }})</a>
                    </template>
                    <template v-else>
                        --
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                prop="report_time"
                label="举报时间"
                show-overflow-tooltip
                width="160px"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.report_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="reply_content"
                label="反馈内容"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                label="操作"
                fixed="right"
                :width="100"
            >
                <template slot-scope="scope">
                    <span
                        class="cursor"
                        @click="fnReport(scope.row)"
                    >反馈</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- dialog -->
        <el-dialog
            title="反馈内容"
            width="530px"
            custom-class="schedule-dialog"
            :visible.sync="showReport"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
            >
                <el-form-item
                    prop='reportCont'
                >
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="ruleForm.reportCont"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    type="primary"
                    @click="submitForm('ruleForm')">提交</el-button>
            </div>
        </el-dialog>
        <!-- dialog -->

        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if="tableData.length > 0"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
        <!-- /分页 -->

        <img-preview ref="preview" />

    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    components: {
        imgPreview
    },
    data () {
        return {
            pageType: 'user',
            report: '',
            reportType: '',
            optionReport: [{
                value: '',
                label: '全部'
            },{
                value: 'a',
                label: '垃圾广告'
            },{
                value: 'b',
                label: '恶意凌辱'
            },{
                value: 'c',
                label: '色情低俗'
            },{
                value: 'd',
                label: '抄袭他人'
            },{
                value: 'e',
                label: '违法违规'
            },{
                value: 'f',
                label: '涉嫌诈骗'
            },{
                value: 'g',
                label: '虚假谣言'
            },{
                value: 'h',
                label: '侵犯隐私'
            },{
                value: 'i',
                label: '其他'
            }],
            optionReportType: [{
                value: '',
                label: '全部'
            },{
                value: 'post',
                label: '动态'
            },{
                value: 'post_comment',
                label: '动态评论'
            },{
                value: 'user',
                label: 'IM用户'
            }],
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            showReport: false,
            ruleForm: {
                reportCont: ''
            },
            report_no: '',
            rules: {
                reportCont: [
                    { required: true, message: '请填写反馈内容', trigger: 'blur' }
                ]
            }
        };
    },
    filters: {
        setType (val) {
            if (val == 'a') {
                return '垃圾广告';
            } else if (val == 'b') {
                return '恶意辱骂';
            } else if (val == "c") {
                return '色情低俗';
            } else if (val == "d") {
                return '抄袭他人';
            } else if (val == 'e') {
                return '违法违规';
            } else if (val == 'f') {
                return '涉嫌咋骗';
            } else if (val == "g") {
                return '虚假谣言';
            } else if (val == 'h') {
                return '侵犯隐私';
            }
        }
    },
    created () {
        this.setHeader();
        this.getTableData();

    },
    methods: {
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '社交'
            },
            {
                title: "举报列表"
            }]
            );
        },

        /**
         * 查看图片
         */
        fnShowPreview(images) {
            this.$refs.preview.show(images);
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/forum_report%5Cget_list', {
                page_id: page || this.page.now_page,
                report_type: this.report,
                data_type: this.reportType
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 反馈
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/forum_report%5Creply', {
                        report_no: this.report_no,
                        reply_content: this.ruleForm.reportCont
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.showReport = !this.showReport;
                            this.getTableData(1);
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * @description 页面切换
         */
        getPageType (event) {
            if(event == 'comment') {
                this.$router.push({
                    name: 'commentReport'
                });
            } else {
                return false;
            }
        },

        /**
         * 反馈
         */
        fnReport (row) {
            this.showReport = !this.showReport;
            this.ruleForm.reportCont = '';
            this.report_no = row.report_no;
        },

        /**
         * 跳转内容列表/评论列表
         */
        fnJump (row) {
            const status = row.data_type;

            if (status == 'post') {
                this.$router.replace({
                    name: 'SocialCont',
                    query: {
                        post_no: row.post['post_no']
                    }
                });
            }
            if (status == 'post_comment') {
                this.$router.replace({
                    name: 'SocialComment',
                    query: {
                        comment_no: row.post_comment['comment_no']
                    }
                });
            }
        },

        /**
         * 跳转用户列表
         */
        goUser (row) {
            const content = row.phone;

            this.$router.replace({
                name: 'SocialUser',
                query: {
                    content
                }
            });
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .header {
            margin-bottom: 20px;
            position: relative;
            display: flex;
            align-items: center;
            .header-title {
                color: #606266;
                margin-right: 8px;
                white-space: nowrap;
            }
            .el-input{
                width: 200px;
            }
            .header-right {
                display: flex;
                margin-left: 30px;
                align-items: center;
                .cont-ipt {
                    margin-left: 20px;
                }
            }
        }
        .cursor {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
<style lang="less">
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
</style>